<!DOCTYPE html>
<html>
<head></head>
<body>
<input type=range list=foo style="width: 100px; padding: 0 40px; transform: scale(1.5) translate(10px, 100px) rotate(-45deg);" value=20 />
<div style="display: inline-block; transform: scale(1.5) translate(10px, 100px) rotate(-45deg);">
    <input type=range list=foo style="width: 100px; padding: 0 40px;" value=20 />
</div>
<div style="display: inline-block; transform: scale(1.5) translate(10px, 100px) rotate(-45deg);">
    <div style="display: inline-block; transform: scale(0.75) translate(10px, 100px) rotate(-45deg);">
        <input type=range list=foo style="width: 100px; padding: 0 40px;" value=20 />
    </div>
</div>
<datalist id=foo>
    <option>0</option>
    <option>10</option>
    <option>20</option>
    <option>30</option>
    <option>40</option>
    <option>50</option>
    <option>60</option>
    <option>70</option>
    <option>100</option>
</datalist>
</body>
</html>
